<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大事件-后台登录</title>
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 1.0 导入bootstrap样式 -->
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <!-- 4.1 导入layui 的css -->
    <link rel="stylesheet" href="./libs/layui/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="./css/login.css">
</head>

<body>
    <div class="container">
        <!-- logo -->
        <img class="logo" src="./images/logo.png" alt="">

        <!-- 登录框 -->
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title"></h3>
            </div>
            <div class="panel-body">
                <!-- 登录框表单 -->
                <form id="login_form" class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-12 item">
                            <input type="text" class="form-control" id="username" name="username" required
                                placeholder="请输入用户名">
                            <!-- 用户图标 -->
                            <i class="glyphicon glyphicon-user"></i>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12 item">
                            <input type="password" class="form-control" id="password" name="password" required
                                placeholder="请输入密码">
                            <!-- 密码图标 -->
                            <i class="glyphicon glyphicon-lock"></i>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12">
                            <button type="submit" id="login" class="btn btn-success btn-block">登录</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="./libs/jquery/jquery.min.js"></script>
    <!-- 4.2 导入layui的js 完成加载动画 -->
    <script src="./libs/layui/lay/modules/layer.js"></script>
    <!-- 9.添加login.js文件 -->
    <script src="./js/login.js"></script>
    <!-- <script>
        $(function () {
            // 1. 实现登录逻辑
            $('#login_form').submit(function (e) {
                // 2. 阻止form表单默认提交事件
                e.preventDefault();
                let params = $('#login_form').serialize();
                var index = null;
                // 3. 发送请求
                $.ajax({
                    url: 'http://localhost:8080/api/v1/admin/user/login',
                    type: 'POST',
                    data: params,
                    beforeSend: function () {
                        // 4. 弹出动画
                        index = layer.load();
                    },
                    complete: function () {
                        // 4.3 关闭动画
                        layer.close(index);
                    },
                    success: function (resData) {
                        // 5. 如果服务器响应状态码不等于200，则表示处理有异常，将异常信息告知用户
                        if (resData.code != 200) {
                            layer.msg(resData.msg);
                            return;
                        }
                        // 服务器响应状态码为200，表示登录成功，服务器响应数据格式：
                        // 6. 将token的值保存到localStorage中
                        localStorage.setItem('bigNews_token', resData.token);
                        // 7. 挑传到首页
                        window.location = './index.html'
                    }
                })

            })
        })
    </script> -->
</body>

</html>